<!-- 学生考试界面 -->

<template>
  <div>
    <div>
      <el-card style="width: 1300px;margin: 15px auto 20px auto">
        <div style="text-align: center;font-size: 20px">
          <div style="margin-bottom: 20px">
            <span style="font-size: 45px">{{ exam.name }}</span>
          </div>
          <div style="margin-bottom: 10px">
            <span style="margin-right: 50px">考场：{{ exam.room }}</span>
            <span style="margin-right: 50px">考试时间：{{ startExamTime }} ~ {{ endExamTime }}</span>
            <span style="margin-right: 50px">监考老师：{{ exam.invigilator }}</span>
          </div>
          <div>
            <span style="margin-right: 50px">考试时长：{{ exam.duration }}（分）</span>
            <span>试卷总分：{{ paperTotalScore }}分</span>
          </div>
          <div style="text-align: right;margin: 15px auto">
            <span>考生姓名：<span><u>{{ Student.username }}</u></span></span>
          </div>
        </div>

        <div style="margin-bottom: 20px">
          <div style="margin-bottom: 10px">
            <span style="font-size: 22px">一、选择题（本题共有{{ type1Total }}小题，每题{{ type1Score }}分，共{{
                type1TotalScore
              }}分）</span>
          </div>
          <div v-for="(item, index) in questions" :key="index" v-if="item.type ===1"
               style="margin: 3px;font-size: 18px">
            <span class="span">{{ index + 1 }}、{{ item.name }}</span>
            <p style="margin: 5px">
              <el-radio v-model="item['studentAnswer']" label="A">A. {{ item.a }}</el-radio>
            </p>
            <p style="margin: 5px">
              <el-radio v-model="item['studentAnswer']" label="B">B. {{ item.b }}</el-radio>
            </p>
            <p style="margin: 5px">
              <el-radio v-model="item['studentAnswer']" label="C">C. {{ item.c }}</el-radio>
            </p>
            <p style="margin: 5px">
              <el-radio v-model="item['studentAnswer']" label="D">D. {{ item.d }}</el-radio>
            </p>
          </div>
        </div>

        <div style="margin-bottom: 20px">
          <div style="margin-bottom: 10px">
            <span style="font-size: 22px">二、判断题（本题共有{{ type2Total }}小题，每题{{ type2Score }}分，共{{
                type2TotalScore
              }}分）</span>
          </div>
          <div v-for="(item, index) in questions" :key="index" v-if="item.type ===2"
               style="margin: 3px;font-size: 18px">
            <div class="span">{{ index + 1 }}、{{ item.name }}
              <span v-if="item.type ===2" style="font-size: 18px;display: inline-block;float: right">
                <el-radio style="margin: 5px" v-model="item['studentAnswer']" label="√">√</el-radio>
                <el-radio style="margin: 5px" v-model="item['studentAnswer']" label="×">×</el-radio>
              </span>
            </div>
          </div>
        </div>

        <div>
          <div style="margin-bottom: 10px">
            <span style="font-size: 22px">三、问答题（本题共有{{ type3Total }}小题，共{{ type3TotalScore }}分）</span>
          </div>
          <div v-for="(item, index) in questions" :key="index" v-if="item.type ===3"
               style="margin: 3px;font-size: 18px">
            <div style="margin-bottom: 15px">
              <span class="span">{{ index + 1 }}、{{ item.name }}<span>（{{ item.score }}分）</span></span>
              <div v-if="item.type ===3" style="margin: 3px;font-size: 18px">
                <el-input type="textarea" autosize v-model="item['studentAnswer' + index]"></el-input>
              </div>
            </div>
          </div>
        </div>

        <div style="text-align: center;margin-top: 23px">
          <el-button style="margin-right: 10px" size="medium" type="success" slot="reference" @click="$router.push('/System_StuExam')">返 回</el-button>
          <el-popconfirm
              icon="el-icon-warning"
              icon-color="red"
              title="确定要交卷吗?"
              confirm-button-text='确定'
              cancel-button-text='在想想'
              @confirm="submitPaper"
          >
            <el-button size="medium" type="primary" slot="reference">交 卷</el-button>
          </el-popconfirm>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "Stu_ExamPaper",
  data() {
    return {
      questions: [],
      examId: this.$route.query.examId,
      exam: {},
      paperTotalScore: 0,
      type1Total: 0,
      type1Score: 0,
      type1TotalScore: 0,
      type2Total: 0,
      type2Score: 0,
      type2TotalScore: 0,
      type3Total: 0,
      type3TotalScore: 0,
      startExamTime: null,
      endExamTime: null,
      Student: localStorage.getItem("Student") ? JSON.parse(localStorage.getItem("Student")) : {},
    }
  },
  created() {
    this.request.get("/exam/" + this.examId).then(res => {
      this.exam = res

      let examTime = new Date(this.exam.time)
      this.startExamTime = this.$moment(examTime).format("YYYY-MM-DD HH:mm")

      let timeDifference = examTime.getMinutes() + parseInt(this.exam.duration)
      examTime.setMinutes(timeDifference)

      this.endExamTime = this.$moment(examTime).format("HH:mm")
    })

    this.request.get("/e-p/exam/" + this.examId).then(res => {
      if (res.data) {
        this.request.get("/paper/view/" + res.data.paperId).then(res => {
          this.questions = res.data

          this.questions.forEach(item => {
            this.paperTotalScore += item.score

            if (item.type === 1) {
              this.type1Total++
              this.type1Score = item.score
              this.type1TotalScore += item.score
            }
            if (item.type === 2) {
              this.type2Total++
              this.type2Score = item.score
              this.type2TotalScore += item.score
            }
            if (item.type === 3) {
              this.type3Total++
              this.type3TotalScore += item.score
            }
          })
        })
      }
    })
  },
  methods: {
    // 提交试卷
    submitPaper() {
      this.request.post("/s-p", {examId: this.examId, paper: JSON.stringify(this.questions)}).then(res => {
        if (res.code === 'code_200') {
          this.$message.success("提交成功！")
        }
      })
    }
  }
}
</script>

<style scoped>
.el-radio:hover {
  color: #409eff;
}

.span {
  word-break: normal;
  width: auto;
  display: block;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
}
</style>